<template>

  <div class="app-container">

    <el-dialog title="管理分类" :visible.sync="dialogFormVisible">
<!--      <div v-for="room_kind in list" class="text item">
        {{room_kind.kind}}
      </div>-->
      <el-table :data="list">
        <el-table-column prop="kind" label="类别"/>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <br><br><br>
      <el-form  >
        <el-form-item>
          <el-input v-model="kind" placeholder="请输入内容" style="width: 350px"></el-input>
          <el-button type="primary" @click="saveKind">添加</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

    <el-form label-width="120px">

      <el-form-item label="会议室名称">
        <el-input v-model="room.name" placeholder=" 示例：五教203"/>
      </el-form-item>

      <el-form-item label="所属类别">
        <!--        <el-input v-model="Info.kind" placeholder=" 示例：娱乐"/>-->
        <el-select v-model="room.kind" placeholder="请选择" >
          <el-option
            v-for="item in list"
            :key="item.kind"
            :label="item.kind"
            :value="item.kind">
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-edit" circle @click="editKind"></el-button>
      </el-form-item>

      <el-form-item label="会议室容量">
        <el-input v-model="room.capacity" placeholder=" 示例：0"/>
      </el-form-item>


      <el-form-item label="备注">
        <el-input v-model="room.describe1" placeholder=" 示例：有空调；有投影"/>
      </el-form-item>



      <el-form-item label="封面">
        <el-upload
          action="http://101.33.210.8:8005/eduoss/fileoss"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-success="handSuccess"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>



      <br><br>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="save">保存</el-button>
      </el-form-item>
    </el-form>



  </div>
</template>
<script>

import kind from "../../api/kind"
import room from "../../api/room"
import user from "../../api/user";
export default {
  data() {
    return {
      editorOption: {},
      saveBtnDisabled:false,
      room:{
        name: '',
        kind: '',
        describe1: '',
        capacity: '',
        cover: ''
      },
      options: [

      ],
      dialogImageUrl: '',
      dialogVisible: false,
      dialogFormVisible:false,
      list:null,
      kind:''
    }
  },
  created() {
    this.listAll()
  },
  methods:{
    listAll() {
      kind.list()
        .then(response=>{
          this.list = response.data.list
        })
    },
    handleRemove(file, fileList) {
      this.dialogImageUrl = file.url;
      /*console.log(file, fileList);*/
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handSuccess(response){
      this.room.cover = response.data.url;
    },
    editKind(){
      this.dialogFormVisible = true
    },
    save(){
      room.add(this.room)
      .then(response=>{
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.$router.push({path:'/nested/menu1'})
      })
    },
    deleteById(id){
      kind.deleteById(id)
        .then(response=>{
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.listAll()
        })
    },
    saveKind(){
      kind.add(this.kind)
      .then(response=>{
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.kind=null
        this.listAll()
      })
    }

  }
}
</script>
<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

</style>
